<template>
    <div>
        <div style="width:600px;float:left;margin-top:20px">
            <bk-form :label-width="100" :model="data" :rules="rules" ref="validateForm1">
                <bk-form-item label="用户名:">
                    <bk-input :readonly="true" v-model="data.username"></bk-input>
                </bk-form-item>
                <bk-form-item label="真实姓名:" :property="'realname'">
                    <bk-input :readonly="readonly" v-model="data.realname"></bk-input>
                </bk-form-item>
                <bk-form-item label="地址:" :property="'address'">
                    <bk-input :readonly="readonly" v-model="data.address"></bk-input>
                </bk-form-item>
                <bk-form-item label="手机号:" :property="'tel'">
                    <bk-input :readonly="readonly" v-model="data.tel"></bk-input>
                </bk-form-item>
                <bk-form-item>
                    <bk-button style="margin-right: 3px;" theme="primary" @click="editinfo" :hidden="editbutton">编辑个人信息</bk-button>
                    <bk-button style="margin-right: 3px;" theme="primary" @click="checkData" :hidden="savebutton">保存</bk-button>
                    <bk-button style="margin-right: 3px;" theme="primary" @click="cancel" :hidden="cancelbutton">取消</bk-button>
                </bk-form-item>
            </bk-form>
        </div>
        <div style="margin-left:100px;margin-top:20px;float:left">
            <p style="font-size:24px">店铺评分(满分为5分):</p>
            <p>速度:{{ rate.rates }}</p>
            <bk-rate :rate.sync="rate.rates" :edit="false" :width="30" :height="30"></bk-rate>
            <p>价格:{{ rate.ratep }}</p>
            <bk-rate :rate.sync="rate.ratep" :edit="false" :width="30" :height="30"></bk-rate>
            <p>质量:{{ rate.rateq }}</p>
            <bk-rate :rate.sync="rate.rateq" :edit="false" :width="30" :height="30"></bk-rate>
        </div>
    </div>
</template>
<script>

    export default {
        data () {
            const user = sessionStorage.getItem('user')
            // console.log(user)
            if (user) {
                const username = JSON.parse(user)
                this.username = username
            }
            this.getselfinfo()
            return {
                cancelbutton: true,
                savebutton: true,
                editbutton: false,
                readonly: true,
                username: '',
                man: true,
                rate: {},
                woman: false,
                data: {
                    realname: '',
                    username: '',
                    sex: '',
                    tel: '',
                    address: ''
                },
                rules: {
                    realname: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '不能多于15个字符',
                            trigger: 'blur'
                        }
                    ],
                    address: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        }
                    ],
                    tel: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            regex: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
                            message: '请输入正确手机号码',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            getselfinfo () {
                const qs = require('qs')
                this.axios({
                    url: '/getselfinfo/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'username': JSON.parse(sessionStorage.getItem('user'))
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        this.rate = res.data.rate
                        const tmp = {
                            username: '',
                            realname: '',
                            address: '',
                            tel: ''
                        }
                        tmp.username = res.data.result_data.username
                        tmp.realname = res.data.result_data.realname
                        tmp.tel = res.data.result_data.tel
                        tmp.address = res.data.result_data.address
                        this.data = tmp
                    }
                })
            },
            editinfo () {
                this.$bkInfo({
                    title: '请更改您的信息'
                })
                // alert('请更改您的信息')
                this.readonly = false
                this.editbutton = true
                this.savebutton = false
                this.cancelbutton = false
            },
            checkData () {
                this.$refs.validateForm1.validate().then(validator => {
                    this.saveinfo()
                    this.readonly = true
                    this.editbutton = false
                    this.savebutton = true
                    this.cancelbutton = true
                }, validator => {
                    // 显示第一个出错位置
                    // alert(validator.content)
                })
            },
            saveinfo () {
                const qs = require('qs')
                this.axios({
                    url: '/saveinfo/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'username': this.data.username,
                        'realname': this.data.realname,
                        'address': this.data.address,
                        'tel': this.data.tel
                    })
                }).then(res => {
                    if (res.data.message === 'success!') {
                        const h = this.$createElement
                        this.$bkInfo({
                            type: 'success',
                            title: '保存成功',
                            showFooter: false,
                            subHeader: h('a', {
                                style: {
                                    color: '#3a84ff',
                                    textDecoration: 'none',
                                    cursor: 'pointer'
                                }
                            })
                        })
                    }
                })
            },
            cancel () {
                this.getselfinfo()
                this.readonly = true
                this.editbutton = false
                this.savebutton = true
                this.cancelbutton = true
            }
        }
    }
</script>
